<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">

    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 150px">
            <select name="column" id="column">
                <option value="">请选择搜索条件</option>
                <option value="username">昵称</option>
                <option value="openid">标识</option>
                <option value="country">国家</option>
                <option value="province">省份</option>
                <option value="city">城市</option>
                <option value="sex">性别</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input style="width: 300px" type="text" id="value" name="value" lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>
    <button type="button" class="layui-btn" id="exportExcelBtn" style="margin-left: 450px">
        <i class="layui-icon">&#xe67d;</i> 批量导出Excel
    </button>
    <button type="button" class="layui-btn" id="exportExcelAllBtn" style="margin-left: 0px">
        <i class="layui-icon">&#xe67d;</i> 全部导出Excel
    </button>
</form>

<table id="userTable" lay-filter="userTable"></table>




<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">


    layui.use(['table','form','layer'],function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        table.render({
            elem:'#userTable'
            ,url:'user/list'
            ,page:true
            ,limit:6
            ,limits:[6,10,15,20]
            ,cols:[[
                {type:'checkbox'}
                ,{field:'id',title:'编号',sort:true, width:80, align:'center'}
                ,{field:'openid', title:'用户标识', align:'center'}
                ,{field:'username',title:'昵称', align:'center'}
                ,{field:'integral',title:'积分',sort:true, align:'center'}
                ,{field:'sex',title:'性别',align:'center',templet:function(d){
                        if(d.sex==2){
                            return '女'
                        }else if (d.sex==1){
                            return '男'
                        }else {
                            return '其它'
                        }
                    }}
                ,{field:'picPath',title:'头像',align:'center',templet:function (d) {
                        return "<img src='"+d.picPath+"' height='50px'/>";
                    }}
                ,{field:'country',title:'国家',align:'center',templet:function (d) {
                        if (d.country == null || d.country == '') {
                            return "-";
                        }else {
                            return d.country;
                        }
                    }}
                ,{field:'province',title:'省份',align:'center',templet:function (d) {
                        if (d.province == null || d.province == '') {
                            return "-";
                        }else {
                            return d.province;
                        }
                    }}
                ,{field:'city',title:'城市',align:'center',templet:function (d) {
                        if (d.city == '市' || d.city == null || d.city == '') {
                            return "-";
                        }else {
                            return d.city;
                        }
                    }}
                ,{toolbar: '#barDemo', align:'center'}
            ]]
        });
        /**
         * 监听userTable的查看封禁按钮的单击事件
         * */
        table.on('tool(userTable)',function (obj) {
            var data = obj.data;

            //封禁按钮的单击事件
            if(obj.event=='del'){
                layer.confirm("你确定要封禁该用户吗",{icon:'3',title:'提示'},function () {
                    $.ajax({
                        url:'user/ban',
                        data:{id:data.id},
                        type:"post",
                        dataType:"json",
                        success:function (result) {
                            if(result.code==200){
                                table.reload("userTable",{
                                    page:{
                                        curr:1
                                    }
                                });
                                layer.msg("封禁用户成功！",{icon:'1',title:'提示'});
                            }
                        }
                    });
                })
            }
        });

        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            var column = $("#column").val();
            var value = $("#value").val();
            if ($("#column").val() == 'sex') {
                switch (value) {
                    case "" : column = ""; break;
                    case '男' : value = 1; break;
                    case '女' : value = 2; break;
                    default: value = 0
                }
            }
            if(column == ""){
                table.reload("userTable",{
                    url:'user/list',
                    page:{
                        curr:1
                    }
                });
            }else{
                table.reload("userTable",{
                    url:'user/search',
                    where:{
                        column: column,
                        value: value
                    }
                });
            }
        });

        /**
         * 批量导出Excel表格功能
         * */
        $("#exportExcelBtn").click(function () {
            var checkStatus = table.checkStatus('userTable');
            if(checkStatus.data.length>0){
                layer.confirm("你确定要导出Excel表格吗？",{icon:'3',title:'提示'},function () {
                    var ids = "";
                    for(var i=0;i<checkStatus.data.length;i++){
                        ids += "ids="+checkStatus.data[i].id+"&"
                    }
                    location.href="user/exportExcel?"+ids;
                    layer.closeAll();
                })
            }else{
                layer.msg("请至少选择一个用户导出Excel！",{icon:'2',title:'提示'});
            }
        });
        /**
         * 导出全部数据Excel表格功能
         * */
        $("#exportExcelAllBtn").click(function () {
            layer.confirm("你确定要导出Excel表格吗？",{icon:'3',title:'提示'},function () {
                location.href='user/exportExcelAll';
                layer.closeAll();
            })
        });






    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">封禁</a>
</script>

</body>
</html>